<template id='homePopup'>
  <div class="homePopup">
    <div class="pc disCenter">
      <transition :name="options.cardTransition">
        <div class="content" @click.stop v-show="options.isShow">
          <slot name="top"></slot>
          <div class="descs">
            <textarea :readonly="options.readOnly" class="cardCenter" spellcheck="false" placeholder="Enter text here…"
              :class="{ isRead: !options.readOnly }" v-model="options.desc"></textarea>
          </div>
          <slot name="bottom"></slot>
          <div class="btns aCenter" v-if="options.isShowBtn">
            <div class="btn discard" v-dc="discard">Discard</div>
            <div class="btn save" v-dc="save">Save</div>
          </div>
        </div>
      </transition>
    </div>
    <div class="phone"></div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  name: "homePopup",
  components: {},
  props: {
    options: {
      type: Object,
    },
  },
  // 定义属性
  data() {
    return {
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {
  },
  // 方法集合
  methods: {
    discard() {
      this.$emit('discard')
    },
    save() {
      this.$emit('save')
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() { },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { }, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='less' scoped>
.homePopup {
  .pc {
    .content {
      display: flex;
      flex-direction: column;
      width: 898px;
      height: 568px;
      background-color: #ffffff;
      box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2),
        0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
      border-radius: 12px;
      border: solid 1px #888888;
      padding: 30px 5%;
      position: relative;

      .descs {
        margin-top: 17px;

        .cardCenter {
          width: 100%;
          height: 496px;
          overflow-y: scroll;
          border: solid 1px transparent;
          -webkit-appearance: none;
          background-color: #fff;
          background-image: none;
          box-sizing: border-box;
          color: #575757;
          display: inline-block;
          line-height: 1.5;
          outline: none;
          padding: 5px 0;
          transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
        }


        .cardCenter:hover {
          cursor: grab;
        }

        .isRead:focus {
          border-color: @tColor ;
          -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(112, 209, 130, .6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(112, 209, 130, .6);
        }
      }

      .cardCenter::-webkit-scrollbar {
        display: none;
        width: 0px !important;
        height: 0px !important;
      }

      .btns {
        position: absolute;
        right: 0;
        bottom: -50px;

        .discard {
          height: 30px;
          margin-right: 12px;
          background-color: transparent;
          border: solid 1px #ffffff;
          box-shadow: 1px 2px 0px 0px transparent;
        }
      }
    }
  }

  .phone {
    display: none;
  }
}

@media screen and (max-width: 980px) {
  .homePopup {
    .pc {
      .content {
        width: 620px;

        .descs {
          .cardCenter {
            height: 450px;
          }
        }

        .btns {
          left: 50%;
          right: unset;
          transform: translateX(-50%);
        }
      }
    }
  }
}

@media screen and (max-width: 650px) {
  .homePopup {

    .pc {
      .content {
        width: 314px;
        height: 450px;
        padding: 15px 20px;

        .descs {
          margin-top: 0px;

          .cardCenter {
            font-size: 14px;
            height: 300px;
          }
        }
      }
    }
  }
}
</style>